<script setup lang="ts">
import { useViewSort } from '@/hooks/useViewSort'
import DishSortItemBar from '@/pages/dishManagement/components/DishSortItemBar.vue'

function handleClickLeft() {
  uni.navigateBack()
}

interface SortItem {
  name: string
  price: string
  img: string
  key?: string | number
  y?: number
}

const initValue = ref<SortItem[]>([
  {
    name: '辣子鸡丁',
    price: '12',
    img: 'https://p0.meituan.net/rmscashier/067eae72da86718144ffa7a0eeae272c57985.jpg',
  },
  {
    name: '辣子鸡丁2',
    price: '12',
    img: 'https://p0.meituan.net/rmscashier/067eae72da86718144ffa7a0eeae272c57985.jpg',
  },
  {
    name: '辣子鸡丁3',
    price: '12',
    img: 'https://p0.meituan.net/rmscashier/067eae72da86718144ffa7a0eeae272c57985.jpg',
  },
])
const { movableContainerHeight, list, handleDragStart, handleMoving, handleDragEnd } = useViewSort(
  115,
  initValue.value,
)
const sortPopupRef = ref()
function handleItemSort(index: number) {
  sortPopupRef.value.open(index)
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="菜品排序" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <wd-notice-bar text="长按拖拽或输入数字，即可排序" prefix="warn-bold" :scrollable="false" />
    <navigator hover-class="none" url="/pages/dishManagement/dishSortSearch">
      <wd-search placeholder="请输入菜名检索" hide-cancel placeholder-left />
    </navigator>
    <view class="movable-container box-border flex-1 overflow-hidden bg-[#F7F9FA] p-4">
      <scroll-view scroll-y class="box-border h-full overflow-hidden" :show-scrollbar="false">
        <movable-area
          :style="{
            height: `${movableContainerHeight}px`,
            width: '100%',
          }"
        >
          <movable-view
            v-for="(item, index) in list"
            :key="item.key"
            :x="0"
            :y="item.y"
            direction="vertical"
            class="w-full"
            @change="handleMoving"
            @touchstart="handleDragStart(index)"
            @touchend="handleDragEnd()"
          >
            <dish-sort-item-bar :name="item.name" :sort="index + 1" @sort="handleItemSort" />
          </movable-view>
        </movable-area>
      </scroll-view>
    </view>
    <view class="bg-white p-2">
      <wd-button type="error" custom-class="w-full" :round="false">保存</wd-button>
    </view>
  </view>
  <SortPopup ref="sortPopupRef" />
</template>

<style scoped lang="scss"></style>
